
<style scoped>
/*.container-water-fall {
  width: 100vw;
  box-sizing: border-box;
}*/
.container-water-fall h4 {
  padding-top: 56px;
  padding-bottom: 28px;
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #ec1919;
  letter-spacing: 1px;
  text-align: justify;
}
.container-water-fall button {
  background-color: #ff0;
  color: #24292e;
  border: 1px solid rgba(27, 31, 35, 0.2);
  border-radius: 0.25em;
  width: 100px;
  line-height: 26px;
  font-size: 13px;
  margin: 4px 0;
  margin-right: 4px;
  cursor: pointer;
  outline: none;
  background: #27fbc2;
}
button:hover {
  background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
}

.cell-item {
  width: 95%;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 0.6rem;
  overflow: hidden;
  box-sizing: border-box;
  margin: 10px 5px;
  box-shadow: 1px 1px 3px -2px;
}
.cell-item img {
  width: 100%;
  height: auto;
  display: block;
}
.item-body {
  padding: 12px;
}
.item-body .item-desc {
  font-size: 15px;
  color: #333333;
  line-height: 15px;
  font-weight: bold;
}
.item-footer {
  margin-top: 22px;
  position: relative;
  display: flex;
  align-items: center;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.name {
  max-width: 150px;
  margin-left: 10px;
  font-size: 14px;
  color: #999999;
}
.like {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  color: #ff4479;
}
i {
  width: 28px;
  display: block;
}
.like-total {
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
}
</style>
<template>
  <div class="container-water-fall">
    <waterfall :col="col" :data="data" @loadmore="loadmore">
      <template>
        <div
          class="cell-item"
          v-for="(item, index) in data"
          :key="index"
          @click="linkDetails"
        >
          <img v-if="item.img" :src="item.img" alt="加载错误" />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>
            <div class="item-footer">
              <div
                v-if="item.avatar"
                class="avatar"
                :style="{ backgroundImage: `url(${item.avatar})` }"
              ></div>
              <div class="name">{{ item.user }}</div>
              <div class="like" :class="item.liked ? 'active' : ''">
                ♥
                <div class="like-total">{{ item.like }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
    <loading :show="loading" />
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
import loading from "./loading";
export default {
  props: {
    isFinite: Boolean,
    parent: String,
  },
  components: {
    loading,
  },
  data() {
    return {
      data: [],
      col: 2,
      loading: false,
      gitHubData: {},
      originData: [
        {
          img: require("../assets/img/life/share1.1.webp"),
          avatar: require("../assets/img/user/user1.webp"),
          title: "位于法国的Nadau Lavergne工作室的住房分享。",
          user: "ZINGVR",
          like: "984",
        },
        {
          img: require("../assets/img/life/share2.1.webp"),
          avatar: require("../assets/img/user/user2.webp"),
          title: "阳光充足",
          user: "hotlinda",
          like: "952",
        },
        {
          img: require("../assets/img/life/share3.1.webp"),
          avatar: require("../assets/img/user/user3.webp"),
          title: "多谢你来看我，伴我山中日月",
          user: "半佛",
          like: "953",
        },
        {
          img: require("../assets/img/life/share4.1.webp"),
          avatar: require("../assets/img/user/user4.webp"),
          title: "院子的花开了",
          user: "小迷人",
          like: "953",
        },
        {
          img: require("../assets/img/life/share5.1.webp"),
          avatar: require("../assets/img/user/user5.webp"),
          title: "苦逼",
          user: "打工人",
          like: "953",
        },
        {
          img: require("../assets/img/life/share6.1.webp"),
          avatar: require("../assets/img/user/user6.webp"),
          title: "海景别墅，想了解的找我",
          user: "不快乐",
          like: "953",
        },
        {
          img: require("../assets/img/life/share7.1.webp"),
          avatar: require("../assets/img/user/user4.webp"),
          title:
            "落日与飞车",
          user: "落日彩虹",
          like: "953",
        },
        {
          img: require("../assets/img/life/share8.1.webp"),
          avatar: require("../assets/img/user/user3.webp"),
          title: "山中别墅",
          user: "吴然",
          like: "953",
        },
         {
          img: require("../assets/img/life/share6.1.webp"),
          avatar: require("../assets/img/user/user6.webp"),
          title: "海景别墅，想了解的找我",
          user: "不快乐",
          like: "953",
        },
        {
          img: require("../assets/img/life/share7.1.webp"),
          avatar: require("../assets/img/user/user4.webp"),
          title:
            "落日与飞车",
          user: "落日彩虹",
          like: "953",
        },
        {
          img: require("../assets/img/life/share8.1.webp"),
          avatar: require("../assets/img/user/user3.webp"),
          title: "山中别墅",
          user: "吴然",
          like: "953",
        },
        
      ],
    };
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
  methods: {
    linkDetails() {
      this.$router.push({
        name: "lifedetails",
        params: {
          parent: this.parent,
        },
      });
    },
    reset() {
      this.data = [];
    },

    switchCol(col) {
      this.col = col;
    },

    loadmore() {
      if (this.isFinite) {
        // 有限
      } else {
        // 无限
        this.loading = true;
        setTimeout(() => {
          this.data = this.data.concat(this.originData, this.originData);
          this.loading = false;
        }, 1000);
      }
    },
  },
  mounted() {
    this.data = this.originData;
  },
};
</script>